<template>
  <view class="order-detail-page">
    <tm-sheet shadow="10">
      <!--  -->
      <tm-row align="center" class="pb-n5 border-b-1">
        <tm-icon name="store-2-line" size="28"></tm-icon>
        <tm-text fontSize="28" class="ml-n2">{{ orderData.merchantName }}</tm-text>
      </tm-row>
      <!--  -->
      <tm-row :wrap="false" align="center" class="my-n5 pb-n5 border-b-1">
        <tm-image
          :src="orderData.productImage"
          :width="100"
          :height="100"
          round="10"
          class="flex-shrink"
        ></tm-image>
        <tm-row class="flex-1 mx-n5 overflow">
          <tm-text class="flex-1" color="#000001" fontSize="32">{{
            orderData.productName
          }}</tm-text>
          <tm-text color="#959eb0" fontSize="24" class="text-overflow">{{
            orderData.description
          }}</tm-text>
        </tm-row>
        <tm-sheet
          margin="0"
          padding="0"
          round="0"
          color="transparent"
          class="text-align-right flex-shrink"
        >
          <tm-text color="#000001" fontSize="32">₦ {{ orderData.price }}</tm-text>
          <tm-text color="#959eb0" fontSize="24">x{{ orderData.quantity }}</tm-text>
        </tm-sheet>
      </tm-row>
      <!--  -->
      <tm-sheet color="transparent" margin="0" padding="0" round="0">
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.disbursements') }}</tm-text>
          <tm-row align="center">
            <tm-text>₦ {{ orderData.price }}</tm-text>
            <tm-icon name="arrow-right-s-line"></tm-icon>
          </tm-row>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.orderNumber') }}</tm-text>
          <tm-row align="center">
            <tm-text>{{ orderData.orderId }}</tm-text>
            <tm-button
              skin="dashed"
              round="20"
              width="80"
              height="32"
              class="ml-n5"
              @click="onCopyId"
            >
              <tm-text font-size="18">{{ $trans('pages.orderDetail.copy') }}</tm-text>
            </tm-button>
          </tm-row>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{
            $trans('pages.orderDetail.order.transactionSnapshot')
          }}</tm-text>
          <tm-text>{{ 'transactionSnapshot' }}</tm-text>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.paymentMethod') }}</tm-text>
          <tm-text>{{ 'xxx' }}</tm-text>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.invoiceType') }}</tm-text>
          <tm-text>{{ 'No' }}</tm-text>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.timeOfPayment') }}</tm-text>
          <tm-text>{{ orderData.createTime }}</tm-text>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.orderTime') }}</tm-text>
          <tm-text>{{ orderData.createTime }}</tm-text>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{ $trans('pages.orderDetail.order.deliveryMethod') }}</tm-text>
          <tm-text>{{ 'EMS' }}</tm-text>
        </tm-row>
        <tm-row justify="space-between">
          <tm-text color="#959eb0">{{
            $trans('pages.orderDetail.order.receiptInformation')
          }}</tm-text>
          <tm-text>{{ 'xxx' }}</tm-text>
        </tm-row>
      </tm-sheet>
      <tm-row></tm-row>
    </tm-sheet>
  </view>
</template>

<script lang="ts" setup>
  const orderData = reactive({
    orderId: '001',
    createTime: '2023-10-01 10:00:00',
    merchantName: 'Merchant A',
    orderStatus: 'Completed',
    productImage: 'https://store.tmui.design/api_v2/public/random_picture',
    productName: 'Product A',
    quantity: 2,
    price: 100.0,
    description: 'This is the description for Product A.This is the description for Product A.',
  });

  const onCopyId = () => {
    uni.setClipboardData({
      data: orderData.orderId,
      success: () => {
        uni.showToast({
          title: 'pages.orderDetail.copySuccess',
          icon: 'none',
        });
      },
    });
  };
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
</style>
